<template>
	<view>
		<u-toast ref="uToast" />
		<view v-if="show" class="loading_view" style="padding:220rpx 0;">
		  <u-loading mode="circle" size="50"></u-loading>
		  <view class="messgae">
			加载中...
		  </view>
		 </view>
		<view v-else>
		<view class="head">
			<image src="../../static/images/member.png"></image>
		</view>
		<view class='cont'>
			<view class="c_head">
				每日推荐
			</view>
			
			<view class='nav'>
				<view v-for="(v,k) in member" :class="v.bool?'list sel':'list'" :key="k" @click="onChose" :data-index="k">
					<view class='time'>{{v.time}}个月</view>
					<view class='pric'>
						￥<text class="xj">{{v.price}}</text>
						<text class="yj" v-if="v.cost_price>0">{{v.cost_price}}</text>
					</view>
					<view class='day'>
						<text v-if='k!=3'>日均{{v.average}}元</text>
						<text v-else class="vip">至尊VIP</text>
					</view>
				</view>
			</view>
			
			<view class="coupon">
				<view class="cp_head">优惠券</view>
				<view class="cp_right">
					<text class='money' v-if="cprice>0" @click="onUrl">￥<text class="pric">{{cprice}}</text></text>
					<text class="default" v-else-if="coupons" @click="onUrl">请选择优惠券</text>
					<text class="default" v-else>暂无优惠券</text>
					<u-icon name="arrow-right" size="28"></u-icon>
				</view>
			</view>
			
			<view class='pay'>
				还需支付
				<text class='fh'>￥</text>
				<text class="je">{{price}}</text>
			</view>
			
		</view>
		
		<view class="btn" @click="onPay">
			开通会员
		</view>
		</view>
	</view>
</template>

<script>
	import pay from '../../static/pay/applets.js'
	export default{
		data(){
			return{
				member:[],
				coupons:null,
				coupon:null,
				price:null,
				cprice:0,
				cid:0,
				show:true
			}
		},onLoad(e){
			
			// this.login()
			
			var type=typeof(e.id);
			
			var ctype=typeof(e.chose)
			
			var id=0;
			
			var chose=3;
			
			var name=typeof(e.name)
			
			if(name!='undefined'){
				this.onPay_success('h5',e.name);
			}
			
			if(type!='undefined' && ctype!='undefined'){
				id=e.id;//优惠券ID
				
				chose=e.chose;
			}
			//选择可用优惠券 选好后携带优惠券ID跳转回来
			this.onMember(id,chose);
		},onBackPress(e) {
			uni.switchTab({
				url: '/pages/user/user'
			});
			return true;
		},methods:{
			onUrl(){
				var chose=0;
				
				for(var i in this.member){
					if(this.member[i].bool){
						chose=i;
					}
				}
				
				uni.navigateTo({
				    url: "/pages/user/use_coupons?cid="+this.cid+"&chose="+chose
				});
			},
			onChose(e){
				var index=e.currentTarget.dataset.index;
				
				for(var i in this.member){
					this.member[i].bool=false;
				}
				
				this.member[index].bool=true;
				
				this.price=this.member[index].price;
				
				this.cprice=0;
				
				this.cid=0;
			},
			onMember(cid=0,chose=3){
				var that=this;
				
				this.$request({
					url:'/user/my_member',
					data:{cid:cid,chose:chose},
					success(res){
						if(res.data.code==1){
							that.member=res.data.data.member;
							
							that.coupons=res.data.data.coupons;
							
							that.coupon=res.data.data.coupon;
							
							for(var i in that.member){
								if(that.member[i].bool){
									that.price=that.member[i].price;
								}
							}
							
							that.cprice=0;
							
							that.cid=0;
							
							if(that.coupon){
								that.cprice=that.coupon.c_money;
								
								var price=that.price-that.cprice;
								
								if(price<=0){
									price=0;
								}
								
								that.price=price;
								
								that.cid=cid;
							}
							
							that.show=false;
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type: 'warning'
							})
						}
					},fail(res){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type: 'warning'
						})
					}
				})
			},
			onPay(){
				var that=this;
				
				var chose=0;
				
				for(var i in this.member){
					if(this.member[i].bool){
						chose=i;
						
						//小程序支付
						// pay.func('/Paymember/jsapi',{month:this.member[i].time,cid:this.cid})
						// return false
					}
				}
				
				this.$request({
					url:'/user/pay_btn',
					data:{chose:chose,cid:this.cid},
					success(res){
						if(res.data.code==1){
							var price=res.data.data.price;
							
							var name=res.data.data.name;
							//h5
							if(price>0){
								that.onPay_h5(res.data.data.mweb_url,name);
							}else{
								that.$refs.uToast.show({
									title: '支付成功',
									type:'success',
									isTab:true,
									url:"/pages/user/user"
								});
							}
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type:'error'
							});
						}
					},fail(){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type:'warning'
						});
					}
				})
			},
			onPay_h5(url,name){
				var redirect_url='http://wx.jianmeijiayuan.com/#/pages/user/my_member?name='+name;
				
				redirect_url=this.getUrl(redirect_url);
				
				location.href=url+"&redirect_url="+redirect_url;
			},
			onPay_success(type='h5',name=""){
				var that=this;
				
				this.$request({
					url:"/bill/user",
					data:{name:name},
					success(res){
						if(res.data.code==1){
							that.$refs.uToast.show({
								title: '支付成功',
								type:'success'
							});
							if(type=='h5'){
								setTimeout(function(){
									location.href='http://wx.jianmeijiayuan.com/#/pages/user/user'
								},1100)
							}
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type:'error'
							});
						}
					},fail(){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type:'warning'
						});
					}
				})
			},
			getUrl(url){
				url = (url + '').toString();

				return encodeURIComponent(url).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
			}
		}
	}
</script>

<style scoped>
	.btn{
		background: #EA4389;
		color:#fff;
		width:100%;
		height:110rpx;
		line-height: 110rpx;
		font-size:32rpx;
		text-align: center;
		position: fixed;
		bottom:0;
	}
	.pay{
		padding:30rpx 20rpx;
		text-align: right;
		font-size:28rpx;
		color:#2B2B2B;
	}
	.pay text{
		color:#EA4389;
		margin-left: 5rpx;
	}
	.pay .fh{
		font-size: 26rpx;
	}
	.pay .je{
		font-size: 34rpx;
	}
	.coupon{
		padding:40rpx 10rpx;
		display:flex;
		border-bottom:1px solid #F1F1F1;
	}
	.coupon view{
		flex:1;
	}
	.coupon .cp_head{
		text-align: left;
		font-size:32rpx;
		color:#2B2B2B;
		font-weight:400;
	}
	.coupon .cp_right{
		text-align: right;
	}
	.coupon .cp_right .money{
		color:#EA4389;
		font-size:28rpx;
	}
	.coupon .cp_right .jt{
		margin-left:10rpx;
	}
	.coupon .cp_right .pric{
		color:#EA4389;
		font-size:32rpx;
	}
	.coupon .cp_right .default{
		color:#888;
	}
	.head{
		width:100%;
		height:300rpx;
	}
	.head image{
		width:100%;
		height:300rpx;
	}
	.cont{
		padding:20rpx;
		background:#F7F7F7;
	}
	.cont .c_head{
		padding:10rpx 0;
		font-size:32rpx;
		color:#2B2B2B;
		font-weight:600;
	}
	.cont .nav{
		display:flex;
		flex-wrap: wrap;
		justify-content:space-between;
		margin:auto;
	}
	.cont .nav .list{
		padding:20rpx 40rpx;
		width:345rpx;
		background:#fff;
		margin:10rpx 0;
		text-align: center;
		border-radius:10rpx;
		box-shadow: 5rpx 5rpx 20rpx #F2F2F2;
		border:1px solid #F2F2F2;
	}
	.cont .nav .sel{
		border-color:#EA4389;
		background:#F4CFDE;
	}
	.cont .nav .list .time{
		font-size:33rpx;
		color:#2B2B2B;
		padding:10rpx 0;
	}
	.cont .nav .list .pric{
		padding:10rpx 0;
		font-size:30rpx;
		color:#EA4389;
	}
	.cont .nav .list .pric .xj{
		font-size:42rpx;
		color:#EA4389;
		font-weight: bold;
	}
	.cont .nav .list .pric .yj{
		font-size:26rpx;
		color:#888;
		text-decoration:line-through;
		margin-left:10rpx;
	}
	.cont .nav .list .day{
		font-size:26rpx;
		color:#888;
		padding:10rpx 0;
	}
</style>
